<template>
  <div class="mod-prod prod-list-mod">
    <!-- 查询和其他操作 -->
    <div class="search-bar">

      <el-form :inline="true" label-width="auto" class="search-form" size="small">

        <div class="input-row">

          <el-form-item label="博客名">
            <el-input
              clearable
              v-model="queryParams.keyword"
              placeholder="请输入博客名"
              @keyup.enter.native="handleFind"
            ></el-input>
          </el-form-item>

          <el-form-item label="分类">
            <el-select
              v-model="queryParams.sortKeyword"
              filterable
              clearable
              remote
              reserve-keyword
              placeholder="请输入分类名"
              :remote-method="sortRemoteMethod"
              @keyup.enter.native="handleFind"
              :loading="loading"
            >
              <el-option
                v-for="item in sortOptions"
                :key="item.uid"
                :label="item.sortName"
                :value="item.uid"
              ></el-option>
            </el-select>
          </el-form-item>

<!--          <el-form-item label="标签">-->
<!--            <el-select-->
<!--              v-model="queryParams.tagKeyword"-->
<!--              filterable-->
<!--              clearable-->
<!--              remote-->
<!--              reserve-keyword-->
<!--              placeholder="请输入标签名"-->
<!--              :remote-method="tagRemoteMethod"-->
<!--              :loading="loading"-->
<!--              @keyup.enter.native="handleFind"-->
<!--            >-->
<!--              <el-option-->
<!--                v-for="item in tagOptions"-->
<!--                :key="item.uid"-->
<!--                :label="item.content"-->
<!--                :value="item.uid"-->
<!--              ></el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->

          <el-form-item label="推荐等级">
            <el-select v-model="queryParams.levelKeyword" clearable placeholder="推荐等级">
              <el-option
                v-for="item in blogLevelDictList"
                :key="item.uid"
                :label="item.dictLabel"
                :value="item.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="是否发布">
            <el-select v-model="queryParams.publishKeyword" clearable placeholder="选择是否发布">
              <el-option
                v-for="item in blogPublishDictList"
                :key="item.uid"
                :label="item.dictLabel"
                :value="item.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="审核类型" >
            <el-select v-model="queryParams.auditType" clearable placeholder="选择审核类型">
              <el-option label="人工审核" :value="0"></el-option>
              <el-option label="自动审核" :value="1"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="状态">
            <el-select v-model="queryParams.statusKeyword" clearable placeholder="选择状态">
              <el-option
                v-for="item in blogStatusDictList"
                :key="item.uid"
                :label="item.dictLabel"
                :value="item.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否原创">
            <el-select v-model="queryParams.originalKeyword" clearable placeholder="是否原创">
              <el-option
                v-for="item in blogOriginalDictList"
                :key="item.uid"
                :label="item.dictLabel"
                :value="item.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="广场类型">
            <el-select v-model="queryParams.typeKeyword" clearable placeholder="广场类型">
              <el-option
                v-for="item in blogTypeDictList"
                :key="item.uid"
                :label="item.dictLabel"
                :value="item.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="发布来源">
            <el-select v-model="queryParams.sourcekeyword" clearable placeholder="发布来源">
              <el-option
                v-for="item in blogSourceDictList"
                :key="item.uid"
                :label="item.dictLabel"
                :value="item.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <div class="default-btn primary-btn" @click="handleFind(true)">{{$t('crud.searchBtn')}}</div>
            <div class="default-btn" @click="resetSearchForm()">{{$t('crud.reset')}}</div>
          </el-form-item>

        </div>
      </el-form>

    </div>
    <div class="main-container">
      <div class="operation-bar">
        <el-row :gutter="10" style="margin-bottom: 8px;">
          <div
            class="default-btn primary-btn"
            @click="handleAdd">
            新建广场
          </div>
          <div
            class="default-btn"
            @click="handleDeleteBatch">
            删除选中
          </div>

        </el-row>
      </div>
      <div class="table-con prod-table">
        <el-table :data="tableData"
                  ref="articleTable"
                  style="width: 100%"
                  @selection-change="handleSelectionChange">

          <el-table-column type="selection"></el-table-column>

          <el-table-column label="序号" width="50" align="center">
            <template slot-scope="scope">
              <span>{{scope.$index + 1}}</span>
            </template>
          </el-table-column>

          <el-table-column label="标题图" width="80" align="center">
            <template slot-scope="scope">
              <div class="table-cell-con">
                <div class="table-cell-image">
                  <img v-if="scope.row.titleImg" :src="resourcesUrl +  (scope.row.titleImg.split(',').indexOf('.') == -1 ? scope.row.titleImg.split(',')[0] : scope.row.titleImg)">
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="标题" width="160" align="center">
            <template slot-scope="scope">
              <span  style="cursor:pointer;">{{ scope.row.title }}</span>
            </template>
          </el-table-column>

          <el-table-column label="作者" width="100" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.author }}</span>
            </template>
          </el-table-column>

          <el-table-column label="是否原创" width="100" align="center" prop="isOriginal"  >
            <template slot-scope="scope">
              <el-tag v-if="scope.row.isOriginal==1" type="success">原创</el-tag>
              <el-tag v-if="scope.row.isOriginal==0" type="info">转载</el-tag>
            </template>
          </el-table-column>

          <el-table-column label="分类" width="100" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.blogSort ? scope.row.blogSort.sortName : '' }}</span>
            </template>
          </el-table-column>

          <el-table-column label="标签" width="100" align="center">
            <template slot-scope="scope">
              <template v-if="scope.row.tagList">
                <el-tag
                  style="margin-left: 3px"
                  type="warning"
                  v-if="item"
                  :key="index"
                  v-for="(item, index) in scope.row.tagList"
                >{{item.content}}
                </el-tag>
              </template>
            </template>
          </el-table-column>

          <el-table-column label="审核类型" width="100" align="center">
            <template slot-scope="scope">
              <el-tag type="danger" v-if="scope.row.auditType == 0">人工审核</el-tag>
              <el-tag v-if="scope.row.auditType == 1">自动审核</el-tag>
            </template>
          </el-table-column>

          <el-table-column label="推荐等级" width="90" align="center" prop="level">
            <template slot-scope="scope">
              <el-tag v-for="item in blogLevelDictList" :key="item.uid" v-if="scope.row.level == item.dictValue"
                      :type="item.listClass">{{item.dictLabel}}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column label="发布来源" width="80" align="center" prop="articleSource" >
            <template slot-scope="scope">
              <el-tag v-for="item in blogSourceDictList" :key="item.uid" v-if="scope.row.articleSource == item.dictValue"
                      :type="item.listClass">{{item.dictLabel}}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column label="类型" width="80" align="center" prop="type" >
            <template slot-scope="scope">
              <el-tag v-for="item in blogTypeDictList" :key="item.uid" v-if="scope.row.type == item.dictValue"
                      :type="item.listClass">{{item.dictLabel}}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column label="开启评论" width="100" align="center" prop="openComment" >
            <template slot-scope="scope">
              <template>
                <el-tag v-for="item in openDictList" :key="item.uid" :type="item.listClass"
                        v-if="scope.row.openComment == item.dictValue">{{item.dictLabel}}
                </el-tag>
              </template>
            </template>
          </el-table-column>

          <el-table-column label="是否发布" width="100" align="center" prop="isPublish" >
            <template slot-scope="scope">
              <template>
                <el-tag v-for="item in blogPublishDictList" :key="item.uid" :type="item.listClass"
                        v-if="scope.row.isPublish == item.dictValue">{{item.dictLabel}}
                </el-tag>
              </template>
            </template>
          </el-table-column>

          <el-table-column label="状态" width="100" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status == 0" type="info">已删除</el-tag>
              <el-tag v-else-if="scope.row.status == 1" type="success">审核通过</el-tag>
              <el-tag v-else-if="scope.row.status == 2" type="danger">审核驳回</el-tag>
              <el-tag v-else-if="scope.row.status == 3">待审核</el-tag>
            </template>
          </el-table-column>

          <el-table-column label="审核意见" width="200" prop="reason" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.reason }}</span>
            </template>
          </el-table-column>

          <el-table-column label="点击数" width="90" align="center" prop="clickCount" >
            <template slot-scope="scope">
              <span>{{ scope.row.clickCount }}</span>
            </template>
          </el-table-column>

          <el-table-column label="创建时间" width="160" align="center" prop="createTime" >
            <template slot-scope="scope">
              <span>{{ scope.row.createTime }}</span>
            </template>
          </el-table-column>

          <el-table-column label="操作" fixed="right" min-width="300">
            <template slot-scope="scope">
              <el-button @click="handleDetail(scope.row)"  type="primary" size="small" >详情
              </el-button>
              <el-button @click="handlePublish(scope.row)" v-if="scope.row.status == 1 && scope.row.isPublish=='0' && scope.row.articleSource ==2" type="primary" size="small" >发布
              </el-button>
              <el-button @click="handleNotPublish(scope.row)" v-if="scope.row.status == 1 && scope.row.isPublish=='1' && scope.row.articleSource ==2" type="primary" size="small" >下架
              </el-button>
              <el-button @click="handleEdit(scope.row)" v-if="scope.row.isPublish=='0' && scope.row.articleSource ==2" type="primary" size="small" v-permission="'/blog/edit'">编辑
              </el-button>
              <el-button @click="handleDelete(scope.row)" v-if="scope.row.isPublish=='0' && scope.row.articleSource ==2"  type="danger" size="small" v-permission="'/blog/delete'">删除
              </el-button>
              <el-button @click="blogAudit(scope.row)" v-if="scope.row.status == 3 && scope.row.auditType == 0"  type="danger" size="small">审核</el-button>
            </template>
          </el-table-column>

        </el-table>
      </div>
    </div>

    <!--分页-->
    <div class="block">
      <el-pagination
        v-if="tableData.length"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <!-- 添加或修改对话框 -->
    <el-dialog
      :title="title"
      v-if="dialogFormVisible"
      :visible.sync="dialogFormVisible"
      fullscreen
    >
      <el-form :model="form" :rules="rules" ref="form">

        <el-row>
          <el-col :span="16">
            <el-form-item label="标题图" :label-width="formLabelWidth">
              <imgs-upload v-model="form.titleImg" :limit="1" :prompt="false" @input="imgsChange"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="16">
            <el-form-item label="标题" :label-width="formLabelWidth" prop="title">
              <el-input v-model="form.title" auto-complete="off" maxlength="200"></el-input>
            </el-form-item>

            <el-form-item label="简介" :label-width="formLabelWidth">
              <el-input v-model="form.summary" auto-complete="off" maxlength="200"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6.5">
            <el-form-item label="分类" :label-width="formLabelWidth" prop="blogSortUid">
              <el-select
                v-model="form.blogSortUid"
                size="small"
                placeholder="请选择"
                style="width:150px"
              >
                <el-option
                  v-for="item in blogSortData"
                  :key="item.uid"
                  :label="item.sortName"
                  :value="item.uid"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6.5">
            <el-form-item label="标签" label-width="80px" prop="tagUid">
              <el-select
                v-model="tagValue"
                multiple
                size="small"
                placeholder="请选择"
                style="width:210px"
                filterable
              >
                <el-option
                  v-for="item in tagData"
                  :key="item.uid"
                  :label="item.content"
                  :value="item.uid"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

<!--          <el-col :span="6.5">-->
<!--            <el-form-item label="推荐等级" :label-width="maxLineLabelWidth" prop="level">-->
<!--              <el-select v-model="form.level" size="small" placeholder="请选择" style="width:210px">-->
<!--                <el-option-->
<!--                  v-for="item in blogLevelDictList"-->
<!--                  :key="item.dictValue"-->
<!--                  :label="item.dictLabel"-->
<!--                  :value="item.dictValue"-->
<!--                ></el-option>-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
        </el-row>

        <el-row>
          <el-col :span="16">
            <el-form-item label="是否原创" :label-width="formLabelWidth" prop="isOriginal">
              <el-radio-group v-model="form.isOriginal" size="small">
                <el-radio v-for="item in blogOriginalDictList" :key="item.uid" :label="item.dictValue" border>
                  {{item.dictLabel}}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="16">
            <el-form-item label="开启评论" :label-width="formLabelWidth" prop="openComment">
              <el-radio-group v-model="form.openComment" size="small">
                <el-radio v-for="item in openDictList" :key="item.uid" :label="item.dictValue"
                          border size="small">{{item.dictLabel}}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="16">
            <el-form-item label="作者" :label-width="formLabelWidth" v-if="form.isOriginal==0" prop="author">
              <el-input v-model="form.author" auto-complete="off" maxlength="200"></el-input>
            </el-form-item>

          </el-col>

          <el-col :span="16">
            <el-form-item label="文章出处" :label-width="formLabelWidth" v-if="form.isOriginal==0">
              <el-input v-model="form.articlesPart" auto-complete="off" maxlength="200"></el-input>
            </el-form-item>

          </el-col>
        </el-row>

        <el-row>
          <el-col :span="16">

            <el-form-item label="内容" :label-width="formLabelWidth" prop="content">

              <tiny-mce
                ref="content"
                :key="form.id"
                v-model="form.content"
                tinymceUploadType="prod"
              ></tiny-mce>

            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="16">
            <el-form-item style="float: right; margin-right: 20px;">
              <el-button  @click="cancelAdd">取 消</el-button>
              <el-button type="primary" @click="submitForm" :loading="loadingout">确 定</el-button>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
    </el-dialog>

    <!-- 广场博客详情 -->
    <el-dialog
      :title="title"
      v-if="dialogFormVisibleDetailOne"
      :visible.sync="dialogFormVisibleDetailOne"
      fullscreen
    >
      <el-form :model="detailform" ref="detailform">

        <el-row>
          <el-col :span="16">
            <el-form-item label="标题图" :label-width="formLabelWidth">
              <imgs-upload v-model="form.titleImg" :limit="1" :prompt="false" disabled/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="16">
            <el-form-item label="标题" :label-width="formLabelWidth" prop="title">
              <el-input v-model="form.title" auto-complete="off" maxlength="200" disabled></el-input>
            </el-form-item>

            <el-form-item label="简介" :label-width="formLabelWidth">
              <el-input v-model="form.summary" auto-complete="off" maxlength="200" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6.5">
            <el-form-item label="分类" :label-width="formLabelWidth" prop="blogSortUid">
              <el-select
                v-model="form.blogSortUid"
                size="small"
                placeholder="请选择"
                style="width:150px"
                disabled
              >
                <el-option
                  v-for="item in blogSortData"
                  :key="item.uid"
                  :label="item.sortName"
                  :value="item.uid"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6.5">
            <el-form-item label="标签" label-width="80px" prop="tagUid">
              <el-select
                v-model="tagValue"
                multiple
                size="small"
                placeholder="请选择"
                style="width:210px"
                filterable
                disabled
              >
                <el-option
                  v-for="item in tagData"
                  :key="item.uid"
                  :label="item.content"
                  :value="item.uid"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6.5">
            <el-form-item label="推荐等级" :label-width="maxLineLabelWidth" prop="level">
              <el-select v-model="form.level" size="small" placeholder="请选择" style="width:210px" disabled>
                <el-option
                  v-for="item in blogLevelDictList"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="16">
            <el-form-item label="是否原创" :label-width="formLabelWidth" prop="isOriginal">
              <el-radio-group v-model="form.isOriginal" size="small" disabled>
                <el-radio v-for="item in blogOriginalDictList" :key="item.uid" :label="item.dictValue" border>
                  {{item.dictLabel}}
                </el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="开启评论" :label-width="formLabelWidth" prop="openComment">
              <el-radio-group v-model="form.openComment" size="small" disabled>
                <el-radio v-for="item in openDictList" :key="item.uid" :label="item.dictValue"
                          border size="small">{{item.dictLabel}}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="16">

            <el-form-item label="用户" :label-width="formLabelWidth"  prop="author">
              <el-input v-model="form.author" auto-complete="off" maxlength="200" disabled></el-input>
            </el-form-item>

            <el-form-item label="文章出处" :label-width="formLabelWidth" v-if="form.isOriginal==0" >
              <el-input v-model="form.articlesPart" auto-complete="off" maxlength="200" disabled></el-input>
            </el-form-item>

          </el-col>
        </el-row>

        <el-row>
          <el-col :span="16">

            <el-form-item label="内容" :label-width="formLabelWidth" prop="content">
              <tiny-mce
                ref="content"
                :key="detailform.id"
                v-model="form.content"
                tinymceUploadType="prod"
              ></tiny-mce>

            </el-form-item>

          </el-col>
        </el-row>

        <el-row>
          <el-col :span="16">
            <el-form-item style="float: right; margin-right: 20px;">
              <el-button  @click="cancelAdd">取 消</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>

    <!-- 朋友圈详情 -->
    <el-dialog
      :title="title"
      v-if="dialogFormVisibleDetailTwo"
      :visible.sync="dialogFormVisibleDetailTwo"
    >
      <el-form :model="friendform" ref="friendform">
        <el-row>
          <el-col>

            <el-form-item label="作者：" :label-width="formLabelWidth" v-if="form.isOriginal==0" prop="author">
              <el-input v-model="form.author" auto-complete="off" maxlength="200" disabled></el-input>
            </el-form-item>

            <el-form-item label="内容：" :label-width="formLabelWidth" prop="content">
              <span style="white-space: pre-wrap">{{form.content}}</span>
            </el-form-item>

            <el-form-item label="图片：" :label-width="formLabelWidth">
              <imgs-upload v-model="form.titleImg" :limit="1" :prompt="false" @input="imgsChange" disabled/>
            </el-form-item>

            <el-form-item style="display: flex;justify-content: flex-end; margin-right: 20px;margin-bottom: 20px;">
              <el-button  @click="cancelAdd">取 消</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>

    <el-dialog title="审核" :visible.sync="dialogAuditVisible" center width="30%" :close-on-click-modal="false" >
      <div style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
        <el-input v-model="reason" placeholder="请输入审核意见"  maxlength="70"  clearable></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogAuditVisible = false">取消</el-button>
        <el-button @click="submitAudit(0)">通过</el-button>
        <el-button type="primary" @click="submitAudit(1)">驳回</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import ImgsUpload from '@/components/imgs-upload'
  import TinyMce from '@/components/tiny-mce'
  import {Loading} from 'element-ui'

  var querystring = require('querystring')

  export default {
    components: {
      ImgsUpload,
      TinyMce
    },
    data () {
      return {
        loadingout: false,
        resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
        queryParams: {
          keyword: '',
          // tagKeyword: '', // 标签搜索
          sortKeyword: '', // 分类搜索
          levelKeyword: '', // 等级搜索
          publishKeyword: '', // 发布 搜索
          originalKeyword: '', // 原创 搜索
          typeKeyword: '', // 类型 博客
          statusKeyword: null, // 只取审核通过的
          sourcekeyword: '',
          auditType: null
        }, // 搜索条件
        pictureList: [], // 上传的图片列表
        BLOG_WEB_URL: process.env.BLOG_WEB_URL,
        multipleSelection: [], // 多选，用于批量删除
        tagOptions: [], // 标签候选框
        sortOptions: [], // 搜索中 分类候选框
        loading: false, // 搜索框加载状态
        uploadLoading: null, // 文件上传loading
        CKEditorData: null,
        tableData: [], // 博客数据
        tagData: [], // 修改页面中 标签数据
        tagValue: [], // 保存选中标签id(编辑时)
        blogSortData: [], // 修改页面中 分类标签
        currentPage: 1,
        pageSize: 10,
        total: 0, // 总数量
        title: '增加博客',
        dialogFormVisible: false, // 控制弹出框
        subjectVisible: false, // 是否显示专题
        isFirstSubjectVisible: true, // 专题选择器是否首次显示【用于懒加载】
        formLabelWidth: '120px',
        lineLabelWidth: '120px', // 一行的间隔数
        maxLineLabelWidth: '100px',
        isEditForm: false,
        photoVisible: false, // 控制图片选择器的显示
        isFirstPhotoVisible: true, // 图片选择器是否首次显示【用于懒加载】
        photoList: [],
        fileIds: '',
        icon: false, // 控制删除图标的显示
        interval: null, // 定义触发器
        isChange: false, // 表单内容是否改变
        changeCount: 0, // 改变计数器
        dialogAuditVisible: false,
        reason: '',
        auditData: null,
        blogOriginalDictList: [
          {
            'dictLabel': '转载',
            'dictValue': '0'
          },
          {
            'dictLabel': '原创',
            'dictValue': '1'
          }
        ], // 审核状态
        // 发布
        blogPublishDictList: [
          {
            'dictLabel': '否',
            'dictValue': '0',
            'listClass': 'danger'
          },
          {
            'dictLabel': '是',
            'dictValue': '1'
          }
        ],
        // 审核状态
        blogStatusDictList: [
          {
            'dictLabel': '审核通过',
            'dictValue': 1
          },
          {
            'dictLabel': '审核驳回',
            'dictValue': 2
          },
          {
            'dictLabel': '待审核',
            'dictValue': 3
          }
        ],
        // 博客推荐等级字典
        blogLevelDictList: [
          {
            'dictLabel': '正常',
            'dictValue': 0,
            'listClass': 'info'
          },
          {
            'dictLabel': '置顶',
            'dictValue': 1,
            'listClass': 'danger'
          },
          {
            'dictLabel': 'dtc专区',
            'dictValue': 2,
            'listClass': 'primary'
          }

        ],
        // 开启评论
        openDictList: [
          {
            'dictLabel': '是',
            'dictValue': 1
          },
          {
            'dictLabel': '否',
            'dictValue': 0,
            'listClass': 'danger'
          }
        ],
        // 类型
        blogTypeDictList: [

          {
            'dictLabel': '广场',
            'dictValue': 0,
            'listClass': 'primary'
          },
          {
            'dictLabel': '圈子',
            'dictValue': 2,
            'listClass': 'danger'
          }
        ],
        // 来源
        blogSourceDictList: [
          {
            'dictLabel': '店铺',
            'dictValue': 0,
            'listClass': 'danger'
          },
          {
            'dictLabel': '用户',
            'dictValue': 1,
            'listClass': 'primary'
          },
          {
            'dictLabel': '平台',
            'dictValue': 2,
            'listClass': 'info'
          }
        ],
        blogOriginalDefault: '0', // 博客原创默认值
        blogLevelDefault: 2, // 博客等级默认值
        blogPublishDefault: null, // 博客发布默认值
        openDefault: 1, // 是否开启评论默认值
        blogTypeDefault: 0, // 文章类型默认值
        fileList: [],
        localUploadVisible: false,
        systemConfig: {}, // 系统配置
        orderByDescColumn: '', // 降序字段
        orderByAscColumn: '', // 升序字段
        dialogFormVisibleDetailOne: false, // 广场详情
        dialogFormVisibleDetailTwo: false, // 朋友圈详情
        form: {
          uid: null,
          title: null,
          level: 2,
          summary: null,
          content: null,
          tagUid: null,
          titleImg: null,
          fileUid: null,
          isOriginal: '0', // 是否原创
          isPublish: null,
          openComment: 1,
          author: null, // 作者
          clickCount: 0,
          articlesPart: null, // 文章出处
          type: 0  // 类型博客
        },
        rules: {
          title: [
            {required: true, message: '标题不能为空', trigger: 'blur'}
          ],
          blogSortUid: [
            {required: true, message: '分类不能为空', trigger: 'blur'}
          ],
          tagUid: [
            {required: true, message: '标签不能为空', trigger: 'blur'}
          ],
          level: [
            {required: true, message: '推荐等级不能为空', trigger: 'blur'},
            {pattern: /^[0-9]\d*$/, message: '推荐等级只能为自然数'}
          ],
          isPublish: [
            {required: true, message: '发布字段不能为空', trigger: 'blur'},
            {pattern: /^[0-9]\d*$/, message: '发布字段只能为自然数'}
          ],
          isOriginal: [
            {required: true, message: '原创字段不能为空', trigger: 'blur'},
            {pattern: /^[0-9]\d*$/, message: '原创字段只能为自然数'}
          ],
          // openComment: [
          //   {required: true, message: '网站评论不能为空', trigger: 'blur'},
          //   {pattern: /^[0-9]\d*$/, message: '网站评论只能为自然数'},
          // ],
          content: [
            {required: true, message: '内容不能为空', trigger: 'blur'}
          ],
          outsideLink: [
            {required: true, message: '外链地址不能为空', trigger: 'blur'},
            {pattern: /^((https|http|ftp|rtsp|mms)?:\/\/)[^\s]+/, message: '请输入有效的URL'}
          ]
        },
        detailform: {
          uid: null,
          title: null,
          level: 2,
          summary: null,
          content: null,
          tagUid: null,
          titleImg: null,
          fileUid: null,
          isOriginal: '0', // 是否原创
          isPublish: null,
          openComment: 1,
          author: null, // 作者
          clickCount: 0,
          articlesPart: null, // 文章出处
          type: 0  // 类型博客
        }
      }
    },
    created () {
      // 获取标签列表
      this.tagList()
      // 获取博客分类
      this.blogSortList()
      // 获取博客列表
      this.blogList()
    },
    methods: {
      // 从后台获取数据,重新排序
      changeSort (val) {
        // 根据当前排序重新获取后台数据,一般后台会需要一个排序的参数
        if (val.order == 'ascending') {
          this.orderByAscColumn = val.prop
          this.orderByDescColumn = ''
        } else {
          this.orderByAscColumn = ''
          this.orderByDescColumn = val.prop
        }
        this.blogList()
      },
      openLoading () {
        this.uploadLoading = Loading.service({
          lock: true,
          text: '正在努力上传中……'
        })
      },
      closeLoading () {
        this.uploadLoading.close()
      },
      tagList: function () {
        var tagParams = {}

        tagParams.current = 1
        tagParams.size = 500
        tagParams.status = 1

        this.$http({
          url: this.$http.adornUrl('/admin/tag/page'),
          method: 'get',
          params: this.$http.adornParams(tagParams)
        }).then(({ data }) => {
          this.tagData = data.records
          this.tagOptions = data.records
        })
      },
      blogSortList: function () {
        var blogSortParams = {}
        blogSortParams.current = 1
        blogSortParams.size = 500
        blogSortParams.status = 1
        this.$http({
          url: this.$http.adornUrl('/admin/blogSort/page'),
          method: 'get',
          params: this.$http.adornParams(blogSortParams)
        }).then(({ data }) => {
          this.blogSortData = data.records
          this.sortOptions = data.records
        })
      },
      resetBlogList: function () {
        this.queryParams = {}
        this.blogList()
      },
      blogList: function () {
        var params = {}
        params.title = this.queryParams.keyword // 博客名
        params.blogSortUid = this.queryParams.sortKeyword // 分类名
        params.level = this.queryParams.levelKeyword // 等级名
        params.isPublish = this.queryParams.publishKeyword // 是否发布
        params.isOriginal = this.queryParams.originalKeyword  // 原创转载
        params.status = this.queryParams.statusKeyword // 状态
        params.type = this.queryParams.typeKeyword // 类型 0博客 2圈子
        params.articleSource = this.queryParams.sourcekeyword
        params.auditType = this.queryParams.auditType
        params.current = this.currentPage
        params.size = this.pageSize
        params.orderByDescColumn = this.orderByDescColumn
        params.orderByAscColumn = this.orderByAscColumn

        this.$http({
          url: this.$http.adornUrl('/admin/blog/page'),
          method: 'get',
          // params: this.$http.adornParams(params)
          params: this.$http.adornParams(
            Object.assign(
              {
                current: this.currentPage,
                size: this.pageSize
              },
              params
            )
          )
        }).then(({data}) => {
          this.tableData = data.records
          this.currentPage = data.current
          this.pageSize = data.size
          this.total = data.total
        })
      },

      getFormObject: function () {
        var formObject = {
          uid: null,
          title: null,
          summary: null,
          content: null,
          tagUid: null,
          fileUid: null,
          isOriginal: this.blogOriginalDefault, // 是否原创
          isPublish: this.blogOriginalDefault, // 是否发布
          type: this.blogTypeDefault, // 文章类型 0博客
          author: null, // 作者
          level: this.blogLevelDefault, // 推荐等级，默认是正常
          openComment: this.openDefault, // 是否启动评论
          articlesPart: null // 文章出处，默认Dtc博客
        }
        return formObject
      },

      // 标签远程搜索函数
      tagRemoteMethod: function (query) {
        if (query !== '') {
          this.tagList()
        } else {
          this.tagOptions = []
        }
      },
      // 分类远程搜索函数
      sortRemoteMethod: function (query) {
        if (query !== '') {
          this.blogSortList()
        } else {
          this.sortOptions = []
        }
      },
      // 关闭模态框
      cancelModel () {
        this.photoVisible = false
      },
      deletePhoto: function () {
        this.form.photoList = null
        this.form.fileUid = ''
      },

      //搜索
      handleFind: function () {
        this.currentPage = 1
        this.blogList()
      },

      //重置表单加载初始数据
      resetSearchForm(){
        this.queryParams = {}

        this.currentPage = 1
        this.blogList()
      },

      handleAdd: function () {
        this.title = '增加博客'
        let that = this
        that.dialogFormVisible = true
        that.form = this.getFormObject()
        that.$nextTick(() => {
          // 初始化内容
          that.$refs.content.setContent('')
        })
        that.tagValue = []
        that.isEditForm = false
      },

      imgsChange () {
        if (this.form.photoList) {
          this.$refs.form.validateField('photoList')
        }
      },
      // 发布
      handlePublish: function (row) {
        this.$http({
          url: this.$http.adornUrl('/admin/blog/updatePublish'),
          method: 'post',
          data: this.$http.adornData(
            {'isPublish': '1', 'uid': row.uid})
        }).then(({ data }) => {
          this.$message({
            message: this.$i18n.t('publics.operation'),
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.blogList()
            }
          })
        })
      },
      // 下架
      handleNotPublish: function (row) {
        this.$http({
          url: this.$http.adornUrl('/admin/blog/updatePublish'),
          method: 'post',
          data: this.$http.adornData(
            {'isPublish': '0', 'uid': row.uid})
        }).then(({ data }) => {
          this.$message({
            message: this.$i18n.t('publics.operation'),
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.blogList()
            }
          })
        })
      },
      handleEdit: function (row) {
        if (row.isPublish == '1') {
          this.$commonUtil.message.error('请先下架在编辑')
          return
        }
        var that = this
        this.title = '编辑博客'
        console.log(row)
        this.form = row
        this.$nextTick(() => {
          // DOM现在更新了
          that.$refs.editor.setData(that.form.content) // 设置富文本内容
        })
        that.tagValue = []
        if (row.tagList) {
          var json = row.tagList
          for (var i = 0, l = json.length; i < l; i++) {
            if (json[i] != null) {
              that.tagValue.push(json[i]['uid'])
            }
          }
        }
        that.dialogFormVisible = true
        that.isEditForm = true
      },
      handleDetail: function (row) {
        var that = this
        this.title = '博客详情'
        this.form = row
        this.$nextTick(() => {
          // DOM现在更新了
          that.$refs.editor.setData(that.form.content) // 设置富文本内容
        })
        that.tagValue = []
        if (row.tagList) {
          var json = row.tagList
          for (var i = 0, l = json.length; i < l; i++) {
            if (json[i] != null) {
              that.tagValue.push(json[i]['uid'])
            }
          }
        }
        if (row.articleSource == 1) {
          that.dialogFormVisibleDetailTwo = true
        } else {
          that.dialogFormVisibleDetailOne = true
        }
      },
      handleDelete: function (row) {
        if (row.isPublish == '1') {
          this.$commonUtil.message.error('请先下架在编辑')
          return
        }
        this.handleDeleteBatch(row)
      },
      blogAudit (row) {
        this.reason = ''
        this.auditData = row
        this.dialogAuditVisible = true
      },
      submitAudit (status) {
        let title = '确定通过？'
        if (status == 1) {
          title = '确定驳回？'
          if (!this.reason) {
            this.$message.error('驳回时审核意见不能为空！')
            return
          }
        }
        this.$confirm(title, this.$i18n.t('text.tips'), {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/admin/blog/audit'),
            method: 'post',
            data: this.$http.adornData(
              {
                uid: this.auditData.uid,
                status: status,
                reason: this.reason
              }
            )
          }).then(({ data }) => {
            this.dialogAuditVisible = false
            this.$message({
              message: this.$i18n.t('publics.operation'),
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.blogList()
              }
            })
          })
        }).catch(() => { })
      },
      handleDeleteBatch: function (row) {
        var that = this
        if (!row.uid && that.multipleSelection.length <= 0) {
          that.$commonUtil.message.error('请先选中需要删除的博客')
          return
        }
        var uids = row.uid
          ? [row.uid]
          : that.multipleSelection.map(item => {
            return item.uid
          })
        that.$confirm('此操作将把选中博客删除, 是否继续?', '提示', {
          confirmButtonText: that.$i18n.t('crud.filter.submitBtn'),
          cancelButtonText: that.$i18n.t('crud.filter.cancelBtn'),
          type: 'warning'
        })
          .then(() => {
            that.$http({
              url: this.$http.adornUrl(`/admin/blog/${uids}`),
              method: 'delete',
              data: this.$http.adornData(uids, false)
            }).then(response => {
              if (response.code == '00000') {
                that.$message({
                  message: this.$i18n.t('publics.operation'),
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    that.blogList()
                  }
                })
              } else {
                that.$commonUtil.message.error(response.message)
              }
            })
          })
          .catch(() => {
            that.$commonUtil.message.info('已取消删除')
          })
      },
      handleCurrentChange: function (val) {
        this.currentPage = val
        this.blogList()
      },
      cancelAdd: function () {
        this.dialogFormVisible = false
        this.dialogFormVisibleDetailOne = false
        this.dialogFormVisibleDetailTwo = false
      },
      submitForm: function () {
        this.loadingout = true
        this.form.tagUid = this.tagValue.join(',')
        this.$refs.form.validate((valid) => {
          if (!valid) {
            this.loadingout = false
            console.log('校验出错')
          } else {
            this.form.type = 0
            if (this.isEditForm) {
              this.$http({
                url: this.$http.adornUrl('/admin/blog'),
                method: 'put',
                data: this.$http.adornData(
                  this.form)
              }).then(({ data }) => {
                this.$message({
                  message: this.$i18n.t('publics.operation'),
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.loadingout = false
                    this.$refs.content.setContent('')
                    this.dialogFormVisible = false
                    this.blogList()
                  }
                })
              }).catch(() => this.loadingout = false)
            } else {
              this.$http({
                url: this.$http.adornUrl('/admin/blog'),
                method: 'post',
                data: this.$http.adornData(
                  this.form)
              }).then(({ data }) => {
                this.$message({
                  message: this.$i18n.t('publics.operation'),
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.loadingout = false
                    this.$refs.content.setContent('')
                    this.dialogFormVisible = false
                    this.blogList()
                  }
                })
              }).catch(() => this.loadingout = false)
            }
          }
        })
      },
      // 改变多选
      handleSelectionChange (val) {
        this.multipleSelection = val
      }
    }
  }
</script>

<style lang="scss" scoped>
  .prod-list-mod {
    .main-container {
      .table-con .table-cell-con .table-cell-text {
        word-break: break-all
      }

      .table-con .table-cell-con{
        display: flex;
        justify-content: center;
      }
      .operation-bar {
        position: relative;

        .all-check-btn {
          margin-right: 10px;
        }

        .had-selected {
          font-size: 12px;
          margin-right: 10px;
        }

        .tag-text {
          font-size: 12px;
        }

        .batch-setting-mask {
          width: 100%;
          height: 100%;
          position: fixed;
          top: 0;
          right: 0;
          z-index: 100;
        }

        .batch-setting-dropdown {
          .batch-setting-btn {
            padding-right: 15px;
            margin-right: 0;

            &:hover {
              .arrow::after {
                border-top: 1px solid #155bd4;
                border-right: 1px solid #155bd4;
              }
            }

            &.active {
              color: #155bd4;
              border-color: #155bd4;

              .arrow::after {
                border-top: 1px solid #155bd4;
                border-right: 1px solid #155bd4;
                transform: rotate(-45deg);
                top: 0px;
                right: 0px;
                transition: all .2s linear;
              }
            }

            .arrow {
              position: relative;
              margin-left: 9px;

              &::after {
                position: relative;
                top: -3px;
                right: 0px;
                transition: all .2s linear;
                content: '';
                display: inline-block;
                width: 6px;
                height: 6px;
                border-top: 1px solid #656565;
                border-right: 1px solid #656565;
                transform: rotate(135deg);
                -webkit-transform: rotate(135deg);
              }
            }
          }
        }
      }
    }

    ::v-deep .export-load {
      top: -50% !important;
    }
  }
</style>
